<template>
  <div>
    <div class="header">
      <div class="header-inner">
        <div class="navbar">
          <a class="logo" href="#"></a>
          <div class="menu">
            <ul>
              <li @click="setActiveIndex(0)">
                <a :class="{ active: activeIndex === 0 }" href="/index">首页</a>
              </li>
              <li @click="setActiveIndex(1)">
                <a :class="{ active: activeIndex === 1 }" href="/film">电影</a>
              </li>
              <!-- <li @click="setActiveIndex(2)">
                <a :class="{ active: activeIndex === 2 }" href="#">影院</a>
              </li>
              <li @click="setActiveIndex(3)">
                <a :class="{ active: activeIndex === 3 }" href="/test">活动</a>
              </li>
              <li @click="setActiveIndex(4)">
                <a :class="{ active: activeIndex === 4 }" href="#">商城</a>
              </li> -->
            </ul>
          </div>
          <!-- <div class="search">
            <input type="text" placeholder="请输入搜索内容" />
            <button>搜索</button>
          </div> -->
          <div class="user-info">
            <div class="user-avatar">
              <img :src="user.img" alt="" />
              <span class="caret"></span>
              <ul class="user-menu">
                <li class="text"><a href="/order">我的订单</a></li>
                <li class="text"><a href="/myinfo">基本信息</a></li>
                <li class=""><a href="#" @click="logout">退出登录</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-placeholder"></div>
  </div>
</template>

<script>
import { logout } from '@/api/user'
import { mapState } from 'vuex'
export default {
  name: 'HeaderNav',
  props: {
    activeIndex: {
      type: Number,
      default: -1
    }
  },
  mounted () {
    this.$store.dispatch('user/setUser')
  },
  computed: {
    ...mapState('user', ['user'])
  },
  methods: {
    setActiveIndex (index) {
      // eslint-disable-next-line vue/no-mutating-props
      this.activeIndex = index // 点击时改变activeIndex的值
    },
    logout () {
      logout().then(() => {
        localStorage.removeItem('token')
        this.$router.push('/')
      })
    }
  }
}
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  min-width: 1200px;
  background-color: #fff;
  border-bottom: 1px solid #d8d8d8;
}
.header .header-inner {
  width: 1200px;
  margin: 0 auto;
  height: 80px;
}
.header .logo,
.header a.logo {
  float: left;
  width: 121px;
  height: 80px;
}
.header .logo {
  background: url(@/assets/imags/logo.png);
  background-size: contain;
  overflow: hidden;
}
.logo img {
  height: 40px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: stretch;
}
.menu ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
  margin: 0 10px;
}

.menu li a {
  display: block;
  padding: 20px 10px;
  color: #333;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-bottom 0.3s;
}

.header .navbar .menu li a.active {
  background-color: #ef4238;
  color: #fff;
  /* padding: 5px 10px; */
}

.search input {
  width: 200px;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 14px;
  background-color: #f2f2f2;
}

.search button {
  width: 60px;
  height: 28px;
  margin-left: 10px;
  border: none;
  border-radius: 14px;
  background-color: #ef4238;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.search button:hover {
  background-color: #ffac2d;
}

img {
  border-style: none;
}
.user-info .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 5px solid #666;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.header .user-info .user-avatar .caret {
    position: absolute;
    top: 39px;
    right: -18px;
}
.header-placeholder {
  height: 81px;
}

.header .user-info {
  float: right;
  position: relative;
  z-index: 9999;
  height: 100%;
}
.header .user-info .user-menu {
  display: none;
  position: absolute;
  right: -31px;
  top: 80px;
  border: 1px solid #d8d8d8;
  background-color: #fff;
  font-size: 14px;
  color: #333;
  text-align: right;
  padding: 15px 10px 5px;
  text-align: center;
}
.header .user-info .user-avatar img {
  margin-top: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  margin-left: 20px;
}
.header .user-info .user-menu li.text {
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.header .user-info .user-menu li {
  margin-bottom: 6px;
}
.user-info:hover .user-menu {
  display: block;
}
.user-info:hover .caret {
  /* 一瞬间变为箭头变为向上 */
  border-top: 0;
  border-bottom: 5px solid #666;
}
</style>
